<template>
  <el-container style="height: 100vh">
    <!-- 头部 -->
    <el-header>
      <div class="left">
        <span>钟伟胜个人网站后台管理系统</span>
      </div>
      <div class="middle">
        <span style="margin: 0 5px">{{ time }}</span
        ><span>{{ username }}</span>
      </div>
      <div class="right">
        <el-button type="info" @click="logout">退出</el-button>
      </div>
    </el-header>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <el-menu
          background-color="#2d303c"
          text-color="#fff"
          active-text-color="#409EFF"
          router
          :default-active="route.path"
          :default-openeds="['2', '3']"
        >
          <el-submenu index="1">
            <template #title><i class="el-icon-monitor"></i>网站管理</template>
            <el-menu-item index="/welcome/edit">欢迎页编辑</el-menu-item>

            <el-menu-item-group>
              <el-menu-item index="/about/edit">关于我</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/resume">简历上传</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template #title
              ><i class="el-icon-edit-outline"></i>博客管理</template
            >
            <el-menu-item-group>
              <template #title>文章管理</template>
              <el-menu-item index="/articles/create">新增文章</el-menu-item>
              <el-menu-item index="/articles/list">文章列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <template #title>Demo管理</template>
              <el-menu-item index="/demo/create">新增Demo</el-menu-item>
              <el-menu-item index="/demo/list">Demo列表</el-menu-item>
              <el-menu-item index="/tag/list">标签列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template #title><i class="el-icon-setting"></i>系统设置</template>
            <el-menu-item-group>
              <template #title>用户管理</template>
              <el-menu-item index="/users/list">管理员列表</el-menu-item>
              <el-menu-item index="/roles/list">角色列表</el-menu-item>
              <el-menu-item index="/visitor/list">访客列表</el-menu-item>
              <el-menu-item index="/comment/list">评论列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 主体 -->
      <el-main>
        <router-view :key="route.path"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { getData } from "../services/http";
import { getTime } from "../libs/utils";
export default {
  name: "Main",
  setup() {
    const router = useRouter();
    const route = useRoute();
    const time = ref("");
    const username = ref("");
    //退出登录
    const logout = () => {
      localStorage.setItem("token", "");
      router.push("/login");
    };
    onMounted(async () => {
      time.value = getTime();
      const res = await getData("user");
      username.value = res.data;
    });
    return {
      logout,
      route,
      time,
      username,
    };
  },
};
</script>

<style lang="scss" scoped>
.el-header {
  background-color: #373c40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  letter-spacing: 1px;
  color: #fff;
}
.el-aside {
  background-color: #333744;
  .el-menu {
    border-right: none;
  }
}
.el-main {
  background-color: #eaedf1;
}
</style>